// 订单历史管理组件
<template>
    <el-table :data="orderList" v-if="!noToken" v-loading="loading" element-loading-text="数据请求中。。。" class="table-up">
        <el-table-column type="expand">
            <template #default="props">
                <div class="table-tm-div">
                    <p class="table-tm-div-p">订单时间: {{ props.row.order_time }}</p>
                    <p class="table-tm-div-p">订单总金额: {{ props.row.total_price }} 元</p>
                    <h3 class="table-tm-div-h3">订单商品列表</h3>
                    <el-table :data="props.row.commodity_list" class="table-tm-table">
                        <el-table-column label=" 商品名">
                            <template #default="scope">
                                {{ scope.row.name }}
                            </template>
                        </el-table-column>
                        <el-table-column label="商品单价(元)">
                            <template #default="scope">
                                <div class="row-price">
                                    ￥： {{ scope.row.price }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label=" 商品数量（个/份）">
                            <template #default="scope">
                                X {{ scope.row.count }}
                            </template>
                        </el-table-column>
                        <el-table-column label=" 商品总价（元）">
                            <template #default="scope">
                                ￥： {{ scope.row.count * scope.row.price }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="订单编号">
            <template #default="props">
                {{ props.row.id }}
            </template>
        </el-table-column>
        <el-table-column label="订单时间">
            <template #default="props">
                {{ props.row.order_time }}
            </template>
        </el-table-column>
        <el-table-column label="实付款">
            <template #default="props">
                ￥： {{ props.row.total_price }}
            </template>
        </el-table-column>
    </el-table>
    <el-empty v-if="noToken" description="登陆后查看数据" style="width: 100%;" />
    <div class="el-card-pagination" v-if="!noToken && total > 0">
        <el-pagination background size="large" layout="prev, pager, next" :total="total" :page-size="pageSize"
            @current-change="handlePageChange" />
    </div>
</template>

<script lang="ts" setup>
import { ElTable } from 'element-plus';
import { HttpMethod } from '@/api/types';
import { ElMessage } from 'element-plus';
import { apiRequest } from '@/api/apiService';
import { ref, onMounted, reactive } from 'vue';
import { AuthService } from '@/api/authService';

const orderList = ref();            // 响应数据
const noToken = ref(true);          // 未登录状态
const loading = ref(false);         // loading标识
const total = ref<number>(0);       // 总条目数
const pageSize = ref<number>(10);   // 每页显示条目数
const currentPage = ref<number>(1); // 当前页码
const listParam = reactive({        // 列表请求参数
    page_number: 1,
    page_size: 10
});

// 初始化
onMounted(() => {
    // 判断是否登录
    if (AuthService.getToken() == '') {
        ElMessage({
            message: '请先登录后，查看历史订单列表！',
            type: 'error'
        });
        total.value = 0;
        noToken.value = true;
    } else {
        noToken.value = false;
        refresh();
    }
});

// 处理页码切换的事件
const handlePageChange = (page: number) => {
    currentPage.value = page;
    refresh();
};

// 刷新表格
const refresh = () => {
    loading.value = true;
    getCartList();
}

// 获取订单列表请求
const getCartList = async () => {
    try {
        const url = '/order/list';
        const customHeaders = { 'Authorization': AuthService.getToken() };
        const response = await apiRequest.request<any>(HttpMethod.POST, url, listParam, customHeaders);
        orderList.value = response.data;
        total.value = response.total;
        loading.value = false;
    } catch (error) {
        console.log('request: /api/order/list failed, error message: ', error);
        loading.value = false;
    }
};
</script>

<style scoped>
.table-up {
    width: 60vw;
    min-width: 800px;
    margin: 10px auto;
}

.table-tm-div {
    margin: 5px 0 0;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #FDF6EC;
}

.table-tm-div-p {
    margin: 10px 0 5px 0;
    font-size: 20px;
}

.table-tm-div-h3 {
    margin: 10px 0 5px 0;
    font-size: 16px;

}

.table-tm-table {
    width: calc(100% - 20px);
    border-radius: 10px;
    margin: 0 10px;
}

.el-card-pagination {
    justify-content: flex-end;
    display: flex;
    width: 80%;
}
</style>